<!doctype html>
<!--[if lte IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <meta name="description" content="Cascading grid layout library" />

  <title>Masonry Methods</title>

  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Noto+Sans:400,700,400italic" />

  
    <!-- DEV MODE - including each .css file -->
    
      <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
    
      <link rel="stylesheet" href="css/base.css" />
    
      <link rel="stylesheet" href="css/code.css" />
    
      <link rel="stylesheet" href="css/demos.css" />
    
      <link rel="stylesheet" href="css/footer.css" />
    
      <link rel="stylesheet" href="css/hero.css" />
    
      <link rel="stylesheet" href="css/icons.css" />
    
      <link rel="stylesheet" href="css/index.css" />
    
      <link rel="stylesheet" href="css/layout.css" />
    
      <link rel="stylesheet" href="css/modules.css" />
    
      <link rel="stylesheet" href="css/site-nav.css" />
    
  

  
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@desandro" />
  <meta name="twitter:url" content="http://masonry.desandro.com/methods.html" />
  <meta name="twitter:title" content="Masonry Methods" />
  <meta name="twitter:description" content="Cascading grid layout library" />

  

</head>
<body class="methods-page" data-page="methods">

  <div id="site-nav">
    <div class="primary-content">
      <h1><a href=".">Masonry</a></h1>
      <ol>
        <li class="nav-options"><a href="options.html">Options</a></li>
        <li class="nav-methods"><a href="methods.html">Methods</a></li>
        <li class="nav-events"><a href="events.html">Events</a></li>
        <li class="nav-appendix"><a href="appendix.html">Appendix</a></li>
        <li class="nav-faq"><a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  
  

  <div id="content">

    <div class="primary-content">
      
        <h1>Methods</h1>
        

      
      
        <ul id="page-nav">
          
            <li><a href="#additems">addItems</a></li>
          
            <li><a href="#appended">appended</a></li>
          
            <li><a href="#bindresize">bindResize</a></li>
          
            <li><a href="#destroy">destroy</a></li>
          
            <li><a href="#getitemelements">getItemElements</a></li>
          
            <li><a href="#getitem">getItem</a></li>
          
            <li><a href="#hide">hide</a></li>
          
            <li><a href="#layout">layout</a></li>
          
            <li><a href="#layoutitems">layoutItems</a></li>
          
            <li><a href="#masonry-data">Masonry.data</a></li>
          
            <li><a href="#off">off</a></li>
          
            <li><a href="#on">on</a></li>
          
            <li><a href="#prepended">prepended</a></li>
          
            <li><a href="#reloaditems">reloadItems</a></li>
          
            <li><a href="#remove">remove</a></li>
          
            <li><a href="#reveal">reveal</a></li>
          
            <li><a href="#stamp">stamp</a></li>
          
            <li><a href="#unbindresize">unbindResize</a></li>
          
            <li><a href="#unstamp">unstamp</a></li>
          
        </ul>
      
    </div>

    
    
<div class="primary-content">

<p>Methods are actions taken on Masonry instances.</p>

<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();</code></pre>


<p>If you are using jQuery, methods follow the jQuery UI pattern <code>.masonry( <span class="string">'methodName'</span> <span class="comment">/* arguments */</span> )</code>.</p>

<pre><code class="js">$(<span class="string">'#container'</span>).masonry()
  .append( elem )
  .masonry( <span class="string">'appended'</span>, elem );
  <span class="comment">// no method is same as layout -&gt; .masonry('layout')</span>
  .masonry();</code></pre>


<p>jQuery chaining is broken by methods that return values (i.e. 
  <a href="#getitemelements"><code>getItemElements</code></a>,
  <a href="#getitem"><code>getItem</code></a>,
  <a href="#on"><code>on</code></a>, and
  <a href="#off"><code>off</code></a>).</p>

<pre><code class="js"><span class="comment">// chaining works with 'appended' method</span>
$container.masonry( <span class="string">'appended'</span>, elem ).fadeIn();
<span class="comment">// 'on' method breaks jQuery chaining</span>
$container.masonry( <span class="string">'on'</span>, <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>() {...} );
$container.fadeIn();</code></pre>


</div><div class="primary-content">

<h2 id="additems">addItems</h2>

<pre><code class="js">msnry.addItems( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'addItems'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Add item elements to the Masonry instance.</p>

</div><div class="primary-content">

<h2 id="appended">appended</h2>

<pre><code class="js">msnry.appended( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'appended'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Add and lay out newly appended item elements. See also <a href="#prepended">prepended</a>.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> demo = document.querySelector(<span class="string">'#appended-demo'</span>);
<span class="keyword">var</span> container = demo.querySelector(<span class="string">'.masonry'</span>);
<span class="keyword">var</span> button = demo.querySelector(<span class="string">'button'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  columnWidth: <span class="number">60</span>
});

eventie.bind( button, <span class="string">'click'</span>, <span class="keyword">function</span>() {
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> elems = [];
  <span class="keyword">var</span> fragment = document.createDocumentFragment();
  <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++ ) {
    <span class="keyword">var</span> elem = getItemElement();
    fragment.appendChild( elem );
    elems.push( elem );
  }
  <span class="comment">// append elements to container</span>
  container.appendChild( fragment );
  <span class="comment">// add and lay out newly appended elements</span>
  msnry.appended( elems );
});</code></pre>

  </div>
  <div id="appended-demo" class="cell demo">
    <button class="button">Append items</button>
    <div class="masonry">
      <div class="item w4"></div>
      <div class="item h4"></div>
      <div class="item w2"></div>
      <div class="item"></div>
      <div class="item h2"></div>
    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/JzDis">Edit example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="bindresize">bindResize</h2>

<pre><code class="js">msnry.bindResize()
<span class="comment">// or with jQuery</span>
$container.masonry(<span class="string">'bindResize'</span>)</code></pre>


<p>Binds event listener to window <code>resize</code>, so layout is triggered when the browser window is resized.</p>

</div><div class="primary-content">

<h2 id="destroy">destroy</h2>

<pre><code class="js">msnry.destroy()
<span class="comment">// or with jQuery</span>
$container.masonry(<span class="string">'destroy'</span>)</code></pre>


<p>Removes the Masonry functionality completely. This will return the element back to its pre-initialized state.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> demo = document.querySelector(<span class="string">'#destroy-demo'</span>);
<span class="keyword">var</span> container = demo.querySelector(<span class="string">'.masonry'</span>);
<span class="keyword">var</span> button = demo.querySelector(<span class="string">'button'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  columnWidth: <span class="number">60</span>
});
<span class="keyword">var</span> isActive = <span class="literal">true</span>;

eventie.bind( button, <span class="string">'click'</span>, <span class="keyword">function</span>() {
  <span class="keyword">if</span> ( isActive ) {
    msnry.destroy();
  } <span class="keyword">else</span> {
    msnry = <span class="keyword">new</span> Masonry( container );
  }
  isActive = !isActive;
});</code></pre>

  </div>
  <div id="destroy-demo" class="cell demo">
    <button class="button">Toggle Masonry</button>
    <div class="masonry">
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/EogCw">Edit this example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="getitemelements">getItemElements</h2>

<pre><code class="js"><span class="keyword">var</span> elems = msnry.getItemElements()
<span class="comment">// or with jQuery</span>
<span class="keyword">var</span> elems = $container.masonry(<span class="string">'getItemElements'</span>)</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit">returns</h5>
    <h5 class="param-name param-bit"><code>itemElems</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Array</i></span>
    </p>
  </li>
</ul>

<p>Get an array of elements used as the Masonry instance's items.</p>

</div><div class="primary-content">

<h2 id="getitem">getItem</h2>

<pre><code class="js"><span class="keyword">var</span> item = msnry.getItem( element )
<span class="comment">// or with jQuery</span>
<span class="keyword">var</span> item = $container.masonry( <span class="string">'getItem'</span>, element )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>element</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Element</i></span>
    </p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit">returns</h5>
    <h5 class="param-name param-bit"><code>item</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry.Item</i></span>
    </p>
  </li>
</ul>

<p>Get a <i>Masonry.Item</i> from an element.</p>

</div><div class="primary-content">

<h2 id="hide">hide</h2>

<pre><code class="js">msnry.hide( items )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'hide'</span>, items )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>items</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Array</i> of <i>Masonry.Item</i>s
      </span>
    </p>
  </li>
</ul>

<p>Hides items.</p>

</div><div class="primary-content">

<h2 id="layout">layout</h2>

<pre><code class="js">msnry.layout()
<span class="comment">// or with jQuery</span>
$container.masonry()</code></pre>


<p>Lay out all item elements.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#layout-demo .masonry'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  columnWidth: <span class="number">60</span>
});

eventie.bind( container, <span class="string">'click'</span>, <span class="keyword">function</span>( event ) {
  <span class="comment">// don't proceed if item was not clicked on</span>
  <span class="keyword">if</span> ( !classie.has( event.target, <span class="string">'item'</span> ) ) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// change size of item via class</span>
  classie.toggle( event.target, <span class="string">'gigante'</span> );
  <span class="comment">// trigger layout</span>
  msnry.layout();
});</code></pre>

  </div>
  <div id="layout-demo" class="cell demo">
    <p class="instruction">Click item to toggle size</p>
    <div class="masonry clickable">
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/vdkJn">Edit this example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="layoutitems">layoutItems</h2>

<pre><code class="js">msnry.layoutItems( items, isStill )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'layoutItems'</span>, items, isStill )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>items</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Array</i> of <i>Masonry.Item</i>s</span>
    </p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit"><code>isStill</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Boolean</i>
    </p>
    <p class="description param-bit">Disables transitions</p>
  </li>
</ul>

<p>Lay out specified items.</p>

</div><div class="primary-content">

<h2 id="masonry-data">Masonry.data</h2>

<pre><code class="js"><span class="keyword">var</span> msnry = Masonry.data( element )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Element</i></span>
    </p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit">returns</h5>
    <p class="param-name param-bit"><code>msnry</code></p>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry</i></span>
    </p>
  </li>
</ul>

<p>Get the Masonry instance from an element. Note this method is of <code>Masonry</code>, rather than of a Masonry instance.</p>

<p>This method is useful to access the Masonry instance after it was initialized via HTML.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"container"</span> <span class="attribute">class</span>=<span class="value">"js-masonry"</span> <span class="attribute">data-masonry-options</span>=<span class="value">'{...}'</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre>

<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
<span class="keyword">var</span> msnry = Masonry.data( container );
<span class="comment">// do stuff with Masonry instance</span>
msnry.layout();</code></pre>


</div><div class="primary-content">

<h2 id="off">off</h2>

<pre><code class="js">msnry.off( eventName, listener )
<span class="comment">// or with jQuery</span>
<span class="keyword">var</span> msnry = $container.masonry( <span class="string">'off'</span>, eventName, listener )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>eventName</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>String</i></span>
    </p>
    <p class="description param-bit">name of a <a href="events.html">Masonry event</a></p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit"><code>listener</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Function</i>
    </p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit">returns</h5>
    <p class="param-name param-bit"><code>msnry</code></p>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry</i></span>
    </p>
  </li>
</ul>

<p>Remove an event listener. See <a href="events.html">Events</a>.</p>

</div><div class="primary-content">

<h2 id="on">on</h2>

<pre><code class="js">msnry.on( eventName, listener )
<span class="comment">// or with jQuery</span>
<span class="keyword">var</span> msnry = $container.masonry( <span class="string">'on'</span>, eventName, listener )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>eventName</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>String</i></span>
    </p>
    <p class="description param-bit">name of a <a href="events.html">Masonry event</a></p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit"><code>listener</code></h5>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Function</i>
    </p>
  </li>
  <li class="param">
    <h5 class="param-name param-bit">returns</h5>
    <p class="param-name param-bit"><code>msnry</code></p>
    <p class="type param-bit">
      <b>Type:</b> <span class="value"><i>Masonry</i></span>
    </p>
  </li>
</ul>

<p>Add an event listener for <a href="events.html">certain events</a>.</p>

<p>Unlike jQuery's <code>on</code>, Masonry's <code>on</code> only works with the specified events. <code>msnry.on( 'click', function() {...})</code> will not work.</p>

<p>To listen for an event just once, <code>return <span class="literal">true</span></code> in the event listener.</p>

<pre><code class="js">msnry.on( <span class="string">'layoutComplete'</span>, <span class="keyword">function</span>() {
  console.log(<span class="string">'layout is complete, just once'</span>);
  <span class="keyword">return</span> <span class="literal">true</span>;
});</code></pre>


</div><div class="primary-content">

<h2 id="prepended">prepended</h2>

<pre><code class="js">msnry.prepended( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'prepended'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Add and lay out newly prepended item elements at the beginning of layout. Similar to <a href="#appended">appended</a>.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> demo = document.querySelector(<span class="string">'#prepended-demo'</span>);
<span class="keyword">var</span> container = demo.querySelector(<span class="string">'.masonry'</span>);
<span class="keyword">var</span> button = demo.querySelector(<span class="string">'button'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  columnWidth: <span class="number">60</span>
});

eventie.bind( button, <span class="string">'click'</span>, <span class="keyword">function</span>() {
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> elems = [];
  <span class="keyword">var</span> fragment = document.createDocumentFragment();
  <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++ ) {
    <span class="keyword">var</span> elem = document.createElement(<span class="string">'div'</span>);
    elem.className = <span class="string">'.item'</span>;
    fragment.appendChild( elem );
    elems.push( elem );
  }
  <span class="comment">// prepend elements to container</span>
  container.insertBefore( fragment, container.firstChild );
  <span class="comment">// add and lay out newly prepended elements</span>
  msnry.prepended( elems );
});</code></pre>

  </div>
  <div id="prepended-demo" class="cell demo">
    <button class="button">Prepend items</button>
    <div class="masonry">
      <div class="item w3"></div>
      <div class="item h4"></div>
      <div class="item w2"></div>
      <div class="item"></div>
      <div class="item h2"></div>
    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/vilFn">Edit example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="reloaditems">reloadItems</h2>

<pre><code class="js">msnry.reloadItems()
<span class="comment">// or with jQuery</span>
$container.masonry(<span class="string">'reloadItems'</span>)</code></pre>


<p>Recollect all item elements.</p>

</div><div class="primary-content">

<h2 id="remove">remove</h2>

<pre><code class="js">msnry.remove( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'remove'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Remove elements from the Masonry instance, then from the DOM.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#remove-demo .masonry'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  columnWidth: <span class="number">60</span>
});

eventie.bind( container, <span class="string">'click'</span>, <span class="keyword">function</span>( event ) {
  <span class="comment">// don't proceed if item was not clicked on</span>
  <span class="keyword">if</span> ( !classie.has( event.target, <span class="string">'item'</span> ) ) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// remove clicked element</span>
  msnry.remove( event.target );
  <span class="comment">// layout remaining item elements</span>
  msnry.layout();
});</code></pre>

  </div>
  <div id="remove-demo" class="cell demo">
    <p class="instruction">Click items to remove them</p>
    <div class="masonry clickable">
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/IBJeq">Edit this example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="reveal">reveal</h2>

<pre><code class="js">msnry.reveal( items )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'reveal'</span>, items )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>items</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Array</i> of <i>Masonry.Item</i>s
      </span>
    </p>
  </li>
</ul>

<p>Reveals hidden items.</p>

</div><div class="primary-content">

<h2 id="stamp">stamp</h2>

<pre><code class="js">msnry.stamp( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'stamp'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Stamp the elements in the layout. Masonry will lay out item elements <em>around</em> stamped elements.</p>

<div class="row example">
  <div class="cell example-code">
<pre><code class="js"><span class="keyword">var</span> demo = document.querySelector(<span class="string">'#stamp-demo'</span>);
<span class="keyword">var</span> stampElem = demo.querySelector(<span class="string">'.stamp'</span>);
<span class="keyword">var</span> button = demo.querySelector(<span class="string">'button'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( demo.querySelector(<span class="string">'.masonry'</span>), {
  columnWidth: <span class="number">60</span>,
  itemSelector: <span class="string">'.item'</span>
});
<span class="keyword">var</span> isStamped = <span class="literal">false</span>;

eventie.bind( button, <span class="string">'click'</span>, <span class="keyword">function</span>() {
  <span class="comment">// stamp or unstamp element</span>
  <span class="keyword">if</span> ( isStamped ) {
    msnry.unstamp( stampElem );
  } <span class="keyword">else</span> {
    msnry.stamp( stampElem );
  }
  <span class="comment">// trigger layout</span>
  msnry.layout();
  isStamped = !isStamped;
});</code></pre>

  </div>
  <div id="stamp-demo" class="cell demo">
    <button class="button">Toggle stamped</button>
    <div class="masonry has-stamp">
      <div class="stamp"></div>
      <div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>

    </div>
    <p class="edit"><a href="http://codepen.io/desandro/pen/wKpjs">Edit this example on CodePen</a></p>
  </div>
</div>

</div><div class="primary-content">

<h2 id="unbindresize">unbindResize</h2>

<pre><code class="js">msnry.unbindResize()
<span class="comment">// or with jQuery</span>
$container.masonry(<span class="string">'unbindResize'</span>)</code></pre>


<p>Un-bind layout to window <code>resize</code> event.</p>

</div><div class="primary-content">

<h2 id="unstamp">unstamp</h2>

<pre><code class="js">msnry.unstamp( elements )
<span class="comment">// or with jQuery</span>
$container.masonry( <span class="string">'unstamp'</span>, elements )</code></pre>


<ul class="params">
  <li class="param">
    <h5 class="param-name param-bit"><code>elements</code></h5>
    <p class="type param-bit">
      <b>Type:</b>
      <span class="value">
        <i>Element</i>,
        <i>NodeList</i>, or
        <i>Array</i> of Elements
      </span>
    </p>
  </li>
</ul>

<p>Un-<a href="#stamp">stamp</a> the elements, so that Masonry will no longer layout item elements around them.</p>

</div>


  </div>

  <div id="footer">
    <div class="primary-content">
      Masonry by <a href="http://desandro.com">David DeSandro</a>. Make something rad with it.
    </div>
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>


  <!-- DEV MODE - including each .js file -->
  
    <script src="bower_components/classie/classie.js"></script>
  
    <script src="bower_components/eventie/eventie.js"></script>
  
    <script src="bower_components/doc-ready/doc-ready.js"></script>
  
    <script src="bower_components/get-style-property/get-style-property.js"></script>
  
    <script src="bower_components/eventEmitter/EventEmitter.js"></script>
  
    <script src="bower_components/imagesloaded/imagesloaded.js"></script>
  
    <script src="bower_components/get-size/get-size.js"></script>
  
    <script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
  
    <script src="bower_components/matches-selector/matches-selector.js"></script>
  
    <script src="bower_components/outlayer/item.js"></script>
  
    <script src="bower_components/outlayer/outlayer.js"></script>
  
    <script src="bower_components/masonry/masonry.js"></script>
  
    <script src="js/controller.js"></script>
  
    <script src="js/pages/events.js"></script>
  
    <script src="js/pages/faq.js"></script>
  
    <script src="js/pages/index.js"></script>
  
    <script src="js/pages/methods.js"></script>
  




</body>
</html>
